<template>
  <div class="content-box">
    <el-form v-bind="getFormProps()">
      <el-radio-group v-model="currentTab" class="checker-tab" @change="handleStatusChange">
        <el-radio :label="1" v-if="$route.query.matchtype != 3006">个人参赛者</el-radio>
        <el-radio :label="2" v-if="false">个人待处理</el-radio>
        <span v-if="$route.query.matchtype == 3006">
          <el-radio v-for="(item, index) in race_group_type.groupList" :key="item.fieldValue" :label="item.fieldValue">{{item.fieldName}}</el-radio>
        </span>
        <el-radio :label="4" v-if="$route.query.matchtype == 3006 && race_detail.lottery == 1">待摇号</el-radio>
        <el-radio :label="3" v-if="$route.query.cost != 0">待支付</el-radio>
      </el-radio-group>
    </el-form>
    <div class="divider"></div>
    <div>
      <div class="players playmanage-list" v-if="race_user_list.total > 0">
        <el-table ref="multipleTable" :data="race_user_list.list" style="width: 100%" v-show="currentTab!=2 && currentTab!=4" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" v-if="currentTab===1 && race_detail.cost === 0 && !isHistory">
          </el-table-column>
          <el-table-column label="用户" width="300" :show-overflow-tooltip="true">
            <template scope="scope">
              <span v-if="scope.row.behalfUserId" class="set_icon">替</span>
              <avatar class="logo" :src="scope.row.iconUrl" style="margin-left:5px;"/>
              <span class="team-name" :title="scope.row.commingName">{{ scope.row.commingName }}</span>
              <img class="sub-logo" :src="scope.row.pcImgtxtUrl" v-show="scope.row.pcImgtxtUrl">
            </template>
          </el-table-column>
          <el-table-column label="性别" width="80">
            <template scope="scope">
              <span class="player-info" v-if="scope.row.sex === 1">男</span>
              <span class="player-info" v-else>女</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="175">
            <template scope="scope">
              <span class="player-info">{{scope.row.idNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="150">
            <template scope="scope">
              <a class="link" href="javascript:void(0)" @click="showManageList(scope.row.id)">查看详细资料</a>
            </template>
          </el-table-column>
          <el-table-column label="" :render-header="reRender">
            <template scope="scope">
              <el-button v-if="currentTab==1 && race_detail.cost === 0 && !isHistory" size="small" :disabled="race_detail.status > 4" @click="hangleOut(scope.$index, scope.row)">踢出</el-button>
              <span v-if="currentTab==3 && scope.row.status===7" class="warn">待支付</span>
              <span v-if="currentTab==3 && scope.row.status===9" class="red">支付超时</span>
              <span v-if="currentTab==3 && scope.row.status===10" class="red">支付失败</span>
            </template>
          </el-table-column>
        </el-table>
        <!--摇号-->
        <el-table ref="multipleTable" :data="race_user_list.list" style="width: 100%" v-show="currentTab == 4" @selection-change="handleSelectionChange">
          <el-table-column label="用户" width="300" :show-overflow-tooltip="true">
            <template scope="scope">
              <avatar class="logo" :src="scope.row.iconUrl"/>
              <span class="team-name" :title="scope.row.commingName">{{ scope.row.commingName }}</span>
              <img class="sub-logo" :src="scope.row.pcImgtxtUrl" v-show="scope.row.pcImgtxtUrl">
            </template>
          </el-table-column>
          <el-table-column label="组别" prop="groupTypeName" width="120"></el-table-column>
          <el-table-column label="所在地" prop="address" width="200" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="">
            <template scope="scope">
              <a class="link" href="javascript:void(0)" @click="showManageList(scope.row.id)">查看详细资料</a>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-table v-show="currentTab==2" ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="用户" width="200">
            <template scope="scope">
              <img class="logo" v-bind:src="scope.row.logo">
              <span class="team-name">{{ scope.row.teamName }}</span>
              <img class="sub-logo" v-bind:src="scope.row.subLogo">
            </template>
          </el-table-column>
          <el-table-column label="性别" width="70">
            <template scope="scope">
              <span class="player-info">{{scope.row.sex}}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="210">
            <template scope="scope">
              <span class="player-info">{{scope.row.IDCard}}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="150">
            <template scope="scope">
              <a class="link" href="javascript:void(0)">查看详细资料</a>
            </template>
          </el-table-column>
          <el-table-column label="" :render-header="reRender">
            <template scope="scope">
              <el-button size="small" @click="checkOut( scope.row)">拒绝</el-button>
              <el-button size="small" @click="checkOut( scope.row)">同意</el-button>
            </template>
          </el-table-column>
        </el-table> -->

      </div>

      <!--无数据提示-->
      <placeholder text="暂无参赛人员" src="/static/images/match/nomatch.png" v-else-if="race_user_list.total == 0"></placeholder>

      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(race_user_list)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <div class="button-box">
      <el-button v-if="currentTab!=3 && currentTab!=4" type="primary" @click="handleCloseMatch" :disabled="!iscloseMatch || isHistory">关闭赛事</el-button>
      <el-button v-if="currentTab!=3 && currentTab!=4" type="primary" @click="handleTermiNation" :disabled="!iscloseBaoming || isTrue || isHistory || (race_detail.status > 4)">提前结束报名</el-button>
      <!-- <router-link v-if="currentTab==1||currentTab==2" :to="'/race/detail/player/invite?id='+$route.query.id+'&tasktype='+$route.query.tasktype">
        <el-button>邀请参赛</el-button>
      </router-link> -->
      <el-button v-if="currentTab == 4 && race_detail.lottery == 1 && race_user_list.total > 0" type="primary" :disabled="isHistory" @click="handleLottery">第{{race_detail.currentLottery + 1}}轮摇号</el-button>
      <el-button v-if="currentTab == 4 && race_detail.lottery == 1 && race_user_list.total > 0" type="primary" @click="handleLotteryHistory">查看摇号结果</el-button>

      <el-button v-if="currentTab==1" type="primary" @click="exportExcel(1)">导出Excel</el-button>
      <el-button v-if="currentTab==3" type="primary" @click="exportExcel(2)">导出Excel</el-button>
      <el-button v-if="currentTab != 1 && currentTab != 3 && currentTab != 4" type="primary" @click="exportExcel(currentTab)">导出Excel</el-button>
    </div>
    <!--查看详细资料-->
    <div>
      <el-dialog title="查看详细资料" :visible.sync="dialogVisible" size="tiny" top="20%">
        <div class="managebox">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">姓名：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.commingName}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">性别：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light"><span v-if="race_singer_info.sex === 1">男</span><span v-else>女</span></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">身份证号：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.idNo}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">联系方式：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.linkPhone}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">报名组别：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.groupTypeName}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">备注：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.remarks}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">衣服尺寸：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.clothingSizeName}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple right">参赛包寄送地址：</div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">{{race_singer_info.address}}</div></el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
    <!--待摇号-->
    <lottery-list :islottery="islottery" :lotteryType="showType" @lotteryChange="setLottery"></lottery-list>
  </div>
</template>

<script>
import raceApi from 'api/race'
import { mapGetters } from 'vuex'
import { downloadFile } from 'utils'
import { pagingList } from 'utils/mixins'
import LotteryList from './LotteryList'
export default {
  mixins: [pagingList],
  components: {
    LotteryList
  },
  props: {
    isHistory: {
      type: Boolean,
      defalute: false
    },
    history: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.$store.dispatch('race_group_type', { matchId: this.$route.query.id })
  },
  mounted () {
    this.nowTime = new Date().format()
  },
  watch: {
    race_group_type: function () {
      if (this.$route.query.matchtype === '3006' && this.race_group_type.groupList) { // 跑步类型
        this.currentTab = this.race_group_type.groupList[0].fieldValue
      }
    }
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail',
      race_group_type: 'race_group_type',
      race_user_list: 'race_user_list',
      race_singer_info: 'race_singer_info'
    }),
    iscloseMatch: function () {
      return (new Date(this.race_detail.signStartTime).format() > this.nowTime) || (this.race_detail.matchScheduleDone === 1 && this.nowTime <= new Date(this.race_detail.endTime).format())
    },
    iscloseBaoming: function () {
      return (this.race_user_list.total >= 4) && (this.nowTime <= new Date(this.race_detail.signEndTime).format())
    }
  },
  data () {
    return {
      dialogVisible: false,
      nowTime: '',
      query: this.getQuery(),
      currentTab: 1,
      userIds: [],
      islottery: false,
      isTrue: false,
      lotteryTitle: '',
      showType: ''
    }
  },
  methods: {
    checkOut (item) {},
    handleRefuse () {},
    handleagree () {},
    setLottery (val) {
      this.islottery = val
    },
    handleStatusChange (value) {
      let scope = this
      setTimeout(function () {
        scope.selectTeamList(value)
      }, 200)
    },
    handleSelectionChange (val) {
      this.userIds = []
      for (let value of val) {
        this.userIds.push(value.userId)
      }
    },
    setStatusList () {
      if (this.$route.query.matchtype !== '3006') { // 其他类型
        if (this.currentTab === 1) { // 参赛者
          if (this.$route.query.cost === '0') { // 免费
            this.query.statusList = '2' // 已报名
          } else {
            this.query.statusList = '8' // 已支付
          }
        } else if (this.currentTab === 3) { // 待支付
          this.query.statusList = '7, 9, 10'
        }
      } else {
        if (this.currentTab !== 1 && this.currentTab !== 3 && this.currentTab !== 4) { // 跑步类别
          if (this.$route.query.cost === '0') { // 免费
            if (this.race_detail.lottery === 1) {
              this.query.statusList = '6'
            } else {
              this.query.statusList = '2'
            }
          } else {
            this.query.statusList = '8'
          }
          this.query.groupType = this.currentTab // 跑步组别
        } else if (this.currentTab === 4) { // 需要摇号
          delete this.query.groupType
          this.query.statusList = '2'
        } else if (this.currentTab === 3) { // 待支付
          delete this.query.groupType
          this.query.statusList = '7, 9, 10'
        }
      }
    },
    // 运动类型，状态设定
    selectTeamList (val) {
      this.setStatusList()
      this.submit(this.query) // 提交表单
    },
    // 参赛者列表
    fetch (query) {
      Object.assign(query, {
        matchId: this.$route.query.id
      })
      this.setStatusList()
      this.$store.dispatch('race_user_list', query)
    },
    // 查看成员详细资料
    showManageList (userId) {
      this.$store.dispatch('race_singer_info', {signMappingId: userId})
      this.dialogVisible = true
    },
    // 踢出参赛者
    hangleOut (index, row) {
      this.userIds.push(row.userId)
      this.$confirm('踢出后该参赛者不能再次报名，确定踢出？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        this.checkOutuser()
      }).catch(() => {
        this.userIds = []
      })
    },
    hangleOutAll () {
      if (this.userIds.length > 0) {
        this.$confirm('踢出后该参赛者不能再次报名，确定踢出？', '温馨提示', {
          type: 'warning'
        }).then(() => {
          this.checkOutuser()
        }).catch(() => {
          return false
        })
      } else {
        this.$message({
          message: '请选择要踢出的成员',
          type: 'info'
        })
      }
    },
    checkOutuser () {
      raceApi.batchKickOut({
        matchId: this.$route.query.id,
        userIds: this.userIds
      }).then((res) => {
        this.$message({
          message: '踢出成功',
          type: 'success'
        })
        this.selectTeamList(this.currentTab)
      }).catch(() => {
        return false
      })
    },
    // 导出Excel
    exportExcel (type) {
      let url = ''
      let fileName = ''
      let state = ''
      if (type === 1) {
        if (this.race_detail.cost === 1) { // 已支付
          state = '&state=8'
        } else { // 免费
          state = '&state=2'
        }
        url = '/api/match/sign/export/individual?matchId=' + this.$route.query.id + state
        fileName = this.race_detail.matchName + '个人参赛者.xls'
      } else if (type === 2) {
        url = '/api/match/sign/export/waitPaid?matchId=' + this.$route.query.id + '&isDaiZhiFu=true'
        fileName = this.race_detail.matchName + '个人待支付.xls'
      } else {
        if (this.race_detail.cost === 1) {
          state = '&state=8'
        }
        url = '/api/match/sign/export/individual?matchId=' + this.$route.query.id + '&groupType=' + type + state
        let typeName = this.getGroupName(type)
        fileName = this.race_detail.matchName + typeName + '.xls'
      }
      downloadFile(url, fileName)
    },
    // 根据组别ID获得组别名称
    getGroupName (type) {
      let groupName = ''
      for (let i of this.race_group_type.groupList) {
        if (i.fieldValue === type) {
          groupName = i.fieldName
        }
      }
      return groupName
    },
    // 提前结束报名
    handleTermiNation () {
      this.$confirm('确定结束报名？', ' 温馨提示', {
        type: 'warning'
      }).then(() => {
        raceApi.termiNation({
          matchId: this.$route.query.id
        }).then((res) => {
          this.$message({
            message: '结束报名成功',
            type: 'success'
          })
          this.isTrue = true
          this.$store.dispatch('race_detail', {
            matchId: this.$route.query.id,
            isRun: this.$route.query.isRun,
            matchtype: this.$route.query.matchtype
          })
        })
      }).catch(() => {
        return false
      })
    },
    // 关闭赛事
    handleCloseMatch () {
      this.$confirm('确定关闭赛事？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        raceApi.closeMatch({
          matchId: this.$route.query.id
        }).then((res) => {
          this.$message({
            message: '关闭赛事成功',
            type: 'success'
          })
          this.$router.push({ path: '/history/detail/index?id=' + this.$route.query.id + '&tasktype=' + this.$route.query.tasktype })
        })
      })
    },
    // 摇号
    handleLottery () {
      raceApi.lotteryList({
        matchId: this.$route.query.id,
        round: this.race_detail.currentLottery + 1
      }).then((res) => {
        this.islottery = true
        this.showType = 'lottery'
        this.$store.dispatch('race_detail', {
          matchId: this.$route.query.id,
          isRun: this.$route.query.isRun,
          matchtype: this.$route.query.matchtype
        })
      }).catch((ERR) => {
        return false
      })
    },
    // 摇号历史
    handleLotteryHistory () {
      setTimeout(() => {
        this.islottery = true
      }, 500)
      this.showType = 'lotteryhistory'
    },
    reRender (createElement) {
      if (this.currentTab === 1 && this.race_detail.cost === 0 && !this.isHistory) {
        return createElement('div', [
          createElement('el-button', {
            domProps: {
              innerHTML: '踢出'
            },
            attrs: {
              size: 'small',
              disabled: this.race_detail.status > 4
            },
            on: {
              click: this.hangleOutAll
            }
          })
        ])
      } else if (this.currentTab === 2) {
        return createElement('div', [
          createElement('el-button', {
            domProps: {
              innerHTML: '拒绝'
            },
            attrs: {
              size: 'small'
            },
            on: {
              click: this.handleRefuse
            }
          }),
          createElement('el-button', {
            domProps: {
              innerHTML: '同意'
            },
            attrs: {
              size: 'small'
            },
            on: {
              click: this.handleagree
            }
          })
        ])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/var.scss';
.loading{
  div{
    min-height: 200px;
  }
  min-height: 200px;
}
.no_matchlist{
  text-align: center;
  color:#999;
}
.managebox{
  .right{
    text-align: right;
  }
  line-height: 2;
}
.btns {
  text-align: center;
}
.players {
  .cell{
    position:relative;
    .set_icon{
      position: absolute;
      font-size: 12px;
      line-height:18px;
      text-align: center;
      height:18px;
      width:18px;
      border-radius:50%;
      background:#00bb90;
      color:#fff;
      top:21px;
      left:0px;
    }
  }
  .logo {
    width: 38px;
    height: 38px;
    margin: 11px 10px 0 0;
    border-radius: 50%;
  }
  .reset {
    margin-right: 10px;
  }
  .sub-logo {
    height: 14px;
    margin: 23px 0 0 5px;
  }
  .team-name {
    line-height: 60px;
    height: 60px;
    max-width:115px;
    overflow: hidden;
    text-overflow:ellipsis;
  }
}

.team-name,
.logo,
.sub-logo,
.checkbox {
  float: left;
}

.pagination {
  display: inline-block;
}

.page {
  margin: 40px auto;
}

.warn {
  color: $orange;
}

.warn,
.red {
  font-size: 12px;
}

.red {
  color: $red;
}

table {
  tr {
    td {
      width: 33.3333333%;
      padding-bottom: 0;
      text-align: center;
    }
    &:nth-child(2n) {
      background-color: #f5f5f5;
    }
  }
}

.link {
  font-size: 12px;
}

.player-info {
  font-size: 12px;
  color: $six-color;
}
.page {
  text-align: center;
}
.el-table__body .cell,
.el-table .cell {
  text-align: center;
}
</style>
